import React from 'react'
import {Form,Button,Input} from "antd-mobile"
import { Tabs } from 'antd-mobile'
import request from "../../api/request";
import { useDispatch } from 'react-redux';
import { loginSuccess } from '../../store/user/userSlice';
import { useNavigate } from 'react-router-dom';

function Login() {
    const navigate=useNavigate();
    const dispatch=useDispatch();
    const onFinish=async(value)=>{
        console.log(value)
        const res=await request.post('/login',value)
        console.log(res);
        const {code,data,message}=res.data
        if(code==200){
            alert(message)
            localStorage.setItem('token',res.token)
            dispatch(loginSuccess(data))
            navigate('/user')
        }
        else{
            alert(message)
        }
    }
  return (
    <div>
      <Tabs>
          <Tabs.Tab title='账号登录' key='fruits'>
            <Form onFinish={onFinish} layout='horizontal' footer={
            <Button block type='submit' color='primary' size='large'>
                登录
            </Button>
            }>
                <Form.Item label="账号" name='username'>
                    <Input placeholder='请输入账号'></Input>
                </Form.Item>

                <Form.Item label="密码" name='password'>
                    <Input placeholder='请输入密码'></Input>
                </Form.Item>
            </Form>
          </Tabs.Tab>
          <Tabs.Tab title='扫码登录' key='vegetables'>
            西红柿
          </Tabs.Tab>
        </Tabs>
    </div>
  )
}

export default Login
